<template>
  <el-tree :data="menus" :props="defaultProps" node-key="carId" ref="menuTree"
   @node-click="nodeClick"></el-tree>
</template>

<script>

export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  components: {},
  activated() {
  },
  methods: {
    /**
     * 获取菜单列表
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"), // 请求的URL地址
        method: "get" // 请求方式为GET
      })
        .then(({data}) => { // 成功时的回调函数
          this.menus = data.data; // 将获取到的菜单数据赋值给菜单变量
        })
        .catch(() => { // 失败时的回调函数
        });
    },
    /**
     * el-tree节点点击事件
     * @param data 节点数据
     * @param node
     * @param component
     */
    nodeClick(data, node, component){
      console.log("子组件被点击");
      this.$emit('tree-node-click', data, node, component);
    }
  },
  created() {
    this.getMenus();
  }
};
</script>

<style scoped>
</style>
